<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模拟手机充电</title>
  </head>
  <body></body>
</html>

<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: 'Arial', sans-serif;
  }

  .charger {
    width: 200px;
    height: 400px;
    background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
    border-radius: 20px;
    position: relative;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }

  .battery {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    transition: height 0.5s ease;
  }

  .charging {
    background: linear-gradient(to top, #76c7c0, #4caf50);
  }

  .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: skyblue;
  }

  .cap {
    width: 40px;
    height: 20px;
    /* background: #e0e0e0; */
    border-radius: 5px;
    position: absolute;
    top: -15px; /* 调整位置使其在电池上方 */
    left: 50%;
    transform: translateX(-50%);
    background-color: #dbe2db;
  }

  .wave {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -150%; /* 改为-150%让波浪从更高处开始 */
    left: -50%;
    transform-origin: 50% 48%; /* 调整旋转中心点 */
    border-radius: 48%; /* 增加圆度 */
    background: rgba(76, 175, 80, 0.6);
    animation: wave 8s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
  }

  .wave-two {
    animation: wave 10s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
    opacity: 0.4;
    background: #81c784;
    top: -160%; /* 错开每层波浪的起始位置 */
  }

  .wave-three {
    animation: wave 12s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
    opacity: 0.2;
    background: #66bb6a;
    top: -170%;
  }

  @keyframes wave {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* 添加波浪容器以限制波浪范围 */
  .charging-level {
    width: 100%;
    background: transparent; /* 改为透明背景 */
    position: absolute;
    bottom: 0;
    left: 0;
    transition: height 0.3s ease;
    overflow: hidden; /* 限制波浪溢出 */
  }
</style>

<div class="charger">
  <div class="cap"></div>
  <!-- 添加电池上方的小凸起 -->
  <div class="battery" id="battery"></div>
  <div class="percentage" id="percentage">0%</div>
</div>

<script>
  let chargeLevel = 0
  const battery = document.getElementById('battery')
  const percentage = document.getElementById('percentage')

  function chargeBattery() {
    if (chargeLevel < 100) {
      chargeLevel += 1
      battery.style.height = chargeLevel + '%'
      battery.classList.add('charging')
      percentage.textContent = chargeLevel + '%'

      // 调整波浪速度和位置
      const waves = document.querySelectorAll('.wave')
      const baseSpeed = 12 // 增加基础速度
      const speedFactor = chargeLevel / 100
      waves.forEach((wave, index) => {
        const speed = baseSpeed - speedFactor * 4 + index * 2
        wave.style.animationDuration = speed + 's'
        // 随充电量调整波浪位置
        const topPosition = -150 + chargeLevel * 0.5 + index * -10
        wave.style.top = topPosition + '%'
      })
    } else {
      clearInterval(chargeInterval)
    }
  }

  const chargeInterval = setInterval(chargeBattery, 100)
</script>
